<?php if (!defined('THINK_PATH')) exit();?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head> 
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
        <title>演示：PHP+jQuery+Ajax九宫格抽奖转盘</title>
        <meta name="keywords" content="九宫格抽奖,PHP抽奖转盘" />
        <meta name="description" content="分享一款jQuery九宫格大转盘抽奖代码网页特效，点击抽奖按钮开始随机抽奖选择奖品，可设置起点位置、奖品数量、转动次数、中奖位置参数，并且后台ajax.php可设置奖品和中奖概率。" />
        <!-- <link rel="stylesheet" type="text/css" href="http://www.sucaihuo.com/jquery/css/common.css" /> -->
        <style type="text/css">
            #lottery{width:574px;height:584px;margin:20px auto;background:url('/lotteryTp/Public/Home/images/bg.jpg') no-repeat;padding:50px 55px;}
            #lottery table td{width:142px;height:142px;text-align:center;vertical-align:middle;font-size:24px;color:#333;font-index:-999}
            #lottery table td a{width:284px;height:284px;line-height:150px;display:block;text-decoration:none;}
            #lottery table td.active{background-color:#ea0000;}

        </style>
    </head>
    <body>
        <!-- <div class="head">
            <div class="head_inner clearfix">
                <ul id="nav">
                    <li><a href="http://www.sucaihuo.com">首 页</a></li>
                    <li><a href="http://www.sucaihuo.com/templates">网站模板</a></li>
                    <li><a href="http://www.sucaihuo.com/js">网页特效</a></li>
                    <li><a href="http://www.sucaihuo.com/php">PHP</a></li>
                    <li><a href="http://www.sucaihuo.com/site">精选网址</a></li>
                </ul>
                <a class="logo" href="http://www.sucaihuo.com"><img src="http://www.sucaihuo.com/Public/images/logo.jpg" alt="素材火logo" /></a>
            </div>
        </div> -->
        <div class="container">

            <div class="demo">
                <h2 class="title"><a href="javascript:;">教程：PHP+jQuery+Ajax九宫格抽奖转盘</a></h2>
                <div id="lottery">
                    <table border="0" cellpadding="0" cellspacing="0">
                        <tr>
                            <td class="lottery-unit lottery-unit-0"><img src="/lotteryTp/Public/Home/images/1.png"></td>
                            <td class="lottery-unit lottery-unit-1"><img src="/lotteryTp/Public/Home/images/2.png"></td>
                            <td class="lottery-unit lottery-unit-2"><img src="/lotteryTp/Public/Home/images/4.png"></td>
                            <td class="lottery-unit lottery-unit-3"><img src="/lotteryTp/Public/Home/images/3.png"></td>
                        </tr>
                        <tr>
                            <td class="lottery-unit lottery-unit-11"><img src="/lotteryTp/Public/Home/images/7.png"></td>
                            <td colspan="2" rowspan="2"><a href="javascript:void(0);"></a></td>
                            <td class="lottery-unit lottery-unit-4"><img src="/lotteryTp/Public/Home/images/5.png"></td>
                        </tr>
                        <tr>
                            <td class="lottery-unit lottery-unit-10"><img src="/lotteryTp/Public/Home/images/1.png"></td>
                            <td class="lottery-unit lottery-unit-5"><img src="/lotteryTp/Public/Home/images/6.png"></td>
                        </tr>
                        <tr>
                            <td class="lottery-unit lottery-unit-9"><img src="/lotteryTp/Public/Home/images/3.png"></td>
                            <td class="lottery-unit lottery-unit-8"><img src="/lotteryTp/Public/Home/images/6.png"></td>
                            <td class="lottery-unit lottery-unit-7"><img src="/lotteryTp/Public/Home/images/8.png"></td>
                            <td class="lottery-unit lottery-unit-6"><img src="/lotteryTp/Public/Home/images/7.png"></td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
        <!-- <div class="foot">
            Powered by sucaihuo.com  本站皆为作者原创，转载请注明原文链接：<a href="http://www.sucaihuo.com" target="_blank">www.sucaihuo.com</a>
        </div> -->
        <script type="text/javascript" src="/lotteryTp/Public/js/jquery-1.8.3.min.js"></script> 
		<script type="text/javascript" src="/lotteryTp/Public/layer/layer.js"></script> 
        <script type="text/javascript">
            var lottery = {
                index: 0, //当前转动到哪个位置，起点位置
                count: 0, //总共有多少个位置
                timer: 0, //setTimeout的ID，用clearTimeout清除
                speed: 20, //初始转动速度
                times: 0, //转动次数
                cycle: 50, //转动基本次数：即至少需要转动多少次再进入抽奖环节
                prize: 0, //中奖位置
                init: function(id) {
                    if ($("#" + id).find(".lottery-unit").length > 0) {
                        $lottery = $("#" + id);
                        $units = $lottery.find(".lottery-unit");
                        this.obj = $lottery;
                        this.count = $units.length;
                        $lottery.find(".lottery-unit-" + this.index).addClass("active");
                    }
                },
                roll: function() {
                    var index = this.index;
                    var count = this.count;
                    var lottery = this.obj;
                    $(lottery).find(".lottery-unit-" + index).removeClass("active");
                    index += 1;
                    if (index > count - 1) {
                        index = 0;
                    }
                    $(lottery).find(".lottery-unit-" + index).addClass("active");
                    this.index = index;
                    return false;
                },
                stop: function(index) {
                    this.prize = index;
                    return false;
                }
            };

            function roll() {
                lottery.times += 1;
                lottery.roll();
                var prize_site = $("#lottery").attr("prize_site");
                if (lottery.times > lottery.cycle + 10 && lottery.index == prize_site) {
                    var prize_id = $("#lottery").attr("prize_id");
                    var prize_name = $("#lottery").attr("prize_name");
                    
                    clearTimeout(lottery.timer);
                    lottery.prize = -1;
                    lottery.times = 0;
                    click = false;
					//alert()
					layer.msg("前端中奖位置："+prize_site+"\n"+"中奖名称："+prize_name+"\n中奖奖品："+prize_id, {
						time: 20000, //20s后自动关闭
						btn: ['明白了', '知道了']
					});

                } else {
                    if (lottery.times < lottery.cycle) {
                        lottery.speed -= 10;
                    } else if (lottery.times == lottery.cycle) {
                        var index = Math.random() * (lottery.count) | 0;
                        lottery.prize = index;
                    } else {
                        if (lottery.times > lottery.cycle + 10 && ((lottery.prize == 0 && lottery.index == 7) || lottery.prize == lottery.index + 1)) {
                            lottery.speed += 110;
                        } else {
                            lottery.speed += 20;
                        }
                    }
                    if (lottery.speed < 40) {
                        lottery.speed = 40;
                    }
                    lottery.timer = setTimeout(roll, lottery.speed);
                }
                return false;
            }

            var click = false;

            $(function() {
                lottery.init('lottery');
                $("#lottery a").click(function() {
                     if (click) {
                        return false;
                    } else {
						layer.confirm('确定消费0.5先元抽奖？', {
							btn: ['开始抽奖','再等等'] //按钮
						}, function(){
							layer.msg('正在抽奖', {icon: 1});
							lottery.speed = 100;
							$.post("<?php echo U('Index/getRandprize');?>", {uid: 1}, function(data) { //获取奖品，也可以在这里判断是否登陆状态
								console.log(data);
								console.log(data['prize_id']);
								$("#lottery").attr("prize_site", data.prize_site);
								$("#lottery").attr("prize_id", data.prize_id);
								$("#lottery").attr("prize_name", data.prize_name);
								roll();
								click = true;
								return false;
							}, "json");
						}, function(){
							
						});
                    }
                });
            })
        </script>
    </body>
</html>